<template>
  <div class="vqd">
    <div class="vqd_left">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" id="headswitch">
          <template slot="title">
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 85%;
                align-items: center;">
              <div>{{ $t("message.live.device") }}</div>
            </div>
          </template>
          <el-tree
            :data="data"
            node-key="id"
            ref="tree"
            @node-click="handleNodeClick"
            :props="defaultProps"
          >
            <span slot-scope="{ data }">
              <span
                :class="data.iconclass"
                style="color: rgb(142, 132, 132)"
              ></span>
              <!-- <img src="" alt=""> -->
              <span :class="data.iconclass1" style="padding-left: 4px">{{
                data.label
              }}</span>
            </span>
          </el-tree>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="vqd_right">
      <div class="liveview_right" id="videoPanel">
        <div class="liveview_right_but">
          <div class="liveview_right_but1">
              <CButton
              class="form_butt iconfont icon-duihao"
              @click="Allon(true)"
              type="submit"
              >全部开启</CButton
            >
            <CButton
              class="form_butt iconfont icon-jinyong"
              @click="Alloff(false)"
              type="submit" style="margin-left:10px"
              >全部关闭</CButton
            >
          </div>
          <div class="liveview_right_but2">
            <el-select class="elselect" size="small" v-model="value" @change='onchange'>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <el-table
          v-loading="loading"
          element-loading-text="正在保存中"
          element-loading-background="rgba(0, 0, 0, 0)"
          stripe
          style="width: 100%"
          :data="
            tableData1
              .filter(
                (data) =>
                  !search ||
                  data.name.toLowerCase().includes(search.toLowerCase()) ||
                  data.token.toLowerCase().includes(search.toLowerCase())
              )
              .slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
        >
          <el-table-column prop="token" :label="label.Token" width="400"></el-table-column>

          <el-table-column prop="name" :label="Name1" width="400"></el-table-column>
          <el-table-column width="400" :label="open_Close">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.open_close"
                :disabled="scope.row.disabled"
                @change="open(scope.$index,scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                @change="handlechange(scope.$index, scope.row)"
                size="mini"
                placeholder="输入关键字"
              />
            </template>
            <template slot-scope="scope">
            <div class="">
              <el-button
                @click="handledel(scope.$index, scope.row)"
                class="iconfont icon-ashbin delete-icon"
                type="text"
              ></el-button>
            </div>
          </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align: center"
          layout=" prev, pager, next,total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value:'',//巡检时间
      values:'',
      options: [
        {
          value:'1',
          label:'1分钟'
        },{
          value:'3',
          label:'3分钟'
        },{
          value: '5',
          label: '5分钟'
        }, {
          value: '10',
          label: '10分钟'
        }, {
          value: '30',
          label: '30分钟'
        }],
      search: "", //搜索
      label: {
        Token: this.$t("message.table.Token"),
        GBID: this.$t("message.table.GBID"),
      },
      open_Close: this.$t("message.camera.open_Close"),
      Name1: this.$t("message.camera.name"),
      audio: this.$t("message.camera.audio"),
      activeNames: ["1"],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
        token: "token",
        iconclass: "iconclass",
      },
      threevideo: [],
      loading: false,
	  //分页
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, //一页数量
      tableData: [],
      vqddatalist:{},
    };
  },
  mounted() {
    this.loadtest();
    this.loadDevice();
    // this.IntervalTime();
    // this.NumberDevice();
    this.vqdlist();
  },
  computed: {
    // 根据计算属性模糊搜索
    tableData1() {
      const searchTableInfo = this.searchTableInfo;
      if (searchTableInfo) {
        return this.tableData.filter((data) => {
          console.log("success" + data);
          return Object.keys(data).some((key) => {
            console.log(data[key]);
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).indexOf(searchTableInfo) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    vqdlist(){
      this.vqddatalist={}
      let url = this.$store.state.IPPORT+ "/api/v2/GetVqdList?session=" + this.$store.state.token;
      this.$http.get(url).then((result) => {
        // console.log(result);
        if (result.data.intervaltime==60000) {
          this.value='1分钟';
          this.values='1分钟';
        }else if (result.data.intervaltime==180000) {
          this.value='3分钟';
          this.values='3分钟';
        }else if (result.data.intervaltime==300000) {
          this.value='5分钟';
          this.values='5分钟';
        }else if(result.data.intervaltime==600000){
          this.value='10分钟';
          this.values='10分钟';
        }else if(result.data.intervaltime==1800000){
          this.value='30分钟';
          this.values='30分钟';
        }
        if (result.data.cam.length!=0) {
          for (let i = 0; i < result.data.cam.length; i++) {
            this.vqddatalist[result.data.cam[i].token]=result.data.cam[i].enable;
          }
        }
        // console.log(this.vqddatalist);
      })
    },
    open(index,date){
      let token = date.token;
      let index_xlh = (this.currentPage - 1) * 10 + index;
      console.log(index_xlh,date);
      let enable = date.open_close;
      let url = this.$store.state.IPPORT+ "/api/v2/AddVqd?token="+token+"&enable="+enable+"&session=" + this.$store.state.token;
      this.$http.get(url).then((result) => {
        this.loading = true;
        console.log(result);
        if (result.data.bStatus) {
          this.vqdlist();
          this.loading = false;
          this.$message({
            message: this.$t("message.camera.Save_successfully"),
            type: "success",
          });
        }else{
          this.loading = false;
          this.tableData[index_xlh].open_close=!enable;
          this.$message({
            message: this.$t("message.camera.Editor_failure"),
            type: "success",
          });
          
        }
      })
    },
    //删除
    handledel(index, row) {
      if (this.vqddatalist[row.token] == undefined) {
        console.log(this.vqddatalist[row.token]);
        return
      }
      this.loading = true;
      var index_xlh = (this.currentPage - 1) * 10 + index;
      this.tableData[index_xlh].open_close=false;
      let url = this.$store.state.IPPORT+ "/api/v2/DeleteVqd?token="+row.token+"&session=" + this.$store.state.token;
      this.$http.get(url).then((result) => {
        console.log(result);
        if (result.data.bStatus) {
          this.loading = false;
          this.vqdlist();
          this.$message({
            message:this.$t("message.camera.Delete_successful"),
            type:"success"
          })
        }else{
          this.loading = false;
          this.$message({
            message:this.$t("message.camera.Delete_failed"),
            type:"success"
          })
        }
      })
    },
    onchange(){
      console.log(this.value);
      let time = this.value*60*1000
      let url = this.$store.state.IPPORT+ "/api/v2/IntervalTime?number="+time+"&session=" + this.$store.state.token;
      console.log(url);
      this.$http.get(url).then((result) => {
        if (result.data.bStatus) {
          this.$message({
            message: '重启后生效',
            type: "success",
          });
        }
        if (result.data.bStatus!=true) {
          this.value = this.values
          this.$message({
            message: this.$t("message.camera.Editor_failure"),
            type: "success",
          });
        }
      })
    },
    //搜索
    handlechange() {},
    //测试机仓
    loadtest() {
      let _this = this;
      var root = this.$store.state.IPPORT;
      //url
      var url =
        root + "/api/v1//GetSrcCamera?session=" + this.$store.state.token;
      this.$http.get(url).then((result) => {
        if (result.status == 200) {
          var data = result.data;
          this.threevideo.push(data.src);
          console.log(data);
          var srcGroup = { children1: [] };
          srcGroup.label = this.$t("message.live.camera");
          srcGroup.iconclass = "iconfont icon-shebei";
          for (var i = 0; i < data.src.length; i++) {
            var item = data.src[i];
            if (item["nOriginalType"] == "H5_CH_GB") {
              continue;
            } else {
              var newItem = {
                token: item["strToken"],
                label: item["strName"],
              };

              srcGroup.children1.push(newItem);
              // this.tableData3.push(newItem)
            }
          }
          this.data.push(srcGroup);
        }
      });
    },
    //sdk
    loadDevice() {
      var root = this.$store.state.IPPORT;
      //url
      var url = root + "/api/v1/GetDevice?session=" + this.$store.state.token;
      //重组
      this.$http.get(url).then((result) => {
        if (result.status == 200) {
          var srcData = [];
          var data = result.data;
          this.threevideo.push(data.dev);
          for (var i = 0; i < data.dev.length; i++) {
            var item = data.dev[i];
            var srclevel = [];
            srclevel["strToken"] = item.strToken;
            srclevel["strName"] = item.strName;
            this.loadSrcdev(srclevel, srcData);
          }
        }
      });
    },
    loadSrcdev(srclevel, srcData) {
      var root = this.$store.state.IPPORT;
      var url =
        root +
        "/api/v1/GetDeviceSrc?token=" +
        srclevel.strToken +
        "&session=" +
        this.$store.state.token;
      // console.log("*******",url)
      this.$http.get(url).then((result) => {
          if (result.status == 200) {
            var data = result.data;
            var srcGroup = { children1: [] };
            srcGroup.label = srclevel.strName;
            srcGroup.iconclass = "iconfont icon-shebei";
            for (var i = 0; i < data.src.length; i++) {
              var item = data.src[i];
              var newItem = {
                token: item["strToken"],
                label: item["strName"],
                open_close:false,
              };
              srcGroup.children1.push(newItem);
            }
            this.data.push(srcGroup);
          }
        })
        .catch((error) => {
          console.log("GetSrc failed", error);
        });
    },
    //数字仓机
    NumberDevice() {
      var root = this.$store.state.IPPORT;
      //url
      var url = root + "/api/v1/GetGbDevice?session=" + this.$store.state.token;

      //重组
      this.$http.get(url).then((result) => {
        if (result.status == 200) {
          var srcData = [];
          var data = result.data;
          this.threevideo.push(data.dev);
          console.log(data);
          for (var i = 0; i < data.dev.length; i++) {
            var item = data.dev[i];
            var srclevel = [];
            srclevel["strToken"] = item.strToken;
            srclevel["strName"] = item.strName;
            this.NumberSrc(srclevel, srcData);
          }
        }
      });
    },
    NumberSrc(srclevel, srcData) {
      var root = this.$store.state.IPPORT;
      var url =
        root +
        "/api/v1/GetGbDeviceSrc?token=" +
        srclevel.strToken +
        "&session=" +
        this.$store.state.token;

      this.$http
        .get(url)
        .then((result) => {
          if (result.status == 200) {
            var data = result.data;
            console.log(data);
            var srcGroup = { children1: [] };
            srcGroup.label = srclevel.strName;
            srcGroup.iconclass = "iconfont icon-shebei";
            for (var i = 0; i < data.src.length; i++) {
              var item = data.src[i];

              var newItem = {
                token: item["strToken"],
                label: item["strName"],
                open_close: false,
              };
              srcGroup.children1.push(newItem);
              // this.tableData3.push(newItem);
            }
            this.data.push(srcGroup);
          }
        })
        .catch((error) => {
          console.log("GetSrc failed", error);
        });
    },
    // loadSrc(tabledata, token) {
    //   // console.log(token);
    //   var data = tabledata;
    //   // console.log(data);
    //   var root = this.$store.state.IPPORT;
    //   var url =
    //     root +
    //     "/api/v1/GetCamera?token=" +
    //     token +
    //     "&session=" +
    //     this.$store.state.token;
    //   // console.log(url);
    //   this.$http.get(url).then((result) => {
    //     if (result.status == 200) {
    //       // console.log(result);
    //       if (result.data.bStatus == false) {
    //       } else {
    //         var itme = result.data.cam;
    //         for (var i = 0; i < itme.length; i++) {
    //           //console.log(itme,itme[i].bEnableAudio)
    //           data["open_close"] = itme[i].bEnable;
    //           data["gbid"] = itme[i].strGbID;
    //           data["audio"] = itme[i].bEnableAudio;
    //           data["ChannelNumber"] = itme[i].nCh;
    //           this.tableData.push(data);
    //           // console.log(this.tableData);
    //           for (var i = 0; i < this.tableData.length; i++) {
    //             for (var j = i + 1; j < this.tableData.length; j++) {
    //               if (this.tableData[i] == this.tableData[j]) {
    //                 //第一个等同于第二个，splice方法删除第二个
    //                 this.tableData.splice(j, 1);
    //                 j--;
    //                 // console.log(this.tableData, 11111);
    //               }
    //             }
    //           }
    //         }
    //       }
    //     }
    //   });
    // },
    //树形节点点击
    handleNodeClick(data, checked, indeterminate) {
      console.log(data);
      this.currentPage = 1;
      this.tableData = [];
      var data = data.children1;
      var tabledata = {};
      let open_closes = '';
      for (var i = 0; i < data.length; i++) {
        if (this.vqddatalist[data[i].token]==='true') {
          open_closes=true;
        }else{
          open_closes=false;
        }
          tabledata = {
            name: data[i].label,
            token: data[i].token,
            open_close: open_closes,
          };
        
        this.tableData.push(tabledata);
        // console.log(this.tableData);
        // this.loadSrc(tabledata, data[i].token);
      }
      console.log(this.tableData);
      this.total = this.tableData.length;
    },
    Allon(on) {
      console.log(on);
      this.loading = true;
      let root = this.$store.state.IPPORT;
      let tableData = this.tableData;
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].open_close) {
          console.log(tableData[i].open_close);
        }else{
          let url = root+ "/api/v2/AddVqd?token="+tableData[i].token+"&enable="+on+"&session=" + this.$store.state.token;
          this.$http.get(url).then((result) => {
            console.log(result);
            this.loading = false;
            if (result.data.bStatus) {
              this.tableData[i].open_close = on;
              this.vqdlist();
              this.$message({
                message: this.$t("message.camera.Save_successfully"),
                type: "success",
              });
            }else{
              this.tableData[i].open_close=!on;
              this.$message({
                message: this.$t("message.camera.Editor_failure"),
                type: "success",
              });
            }
          })
        }
      }
    },
    Alloff(off) {
      console.log(off);
      this.loading=true;
      let root = this.$store.state.IPPORT;
      let tableData = this.tableData;
      for (let i = 0; i < tableData.length; i++) {
        if (!tableData[i].open_close) {
          console.log(tableData[i].open_close);
        }else{
          let url = root+ "/api/v2/AddVqd?token="+tableData[i].token+"&enable="+off+"&session=" + this.$store.state.token;
          this.$http.get(url).then((result) => {
            if (result.data.bStatus) {
              this.tableData[i].open_close = off;
              this.vqdlist();
              this.loading = false;
              this.$message({
                message: this.$t("message.camera.Save_successfully"),
                type: "success",
              });
            }else{
              this.loading = false;
              this.tableData[i].open_close=!off;
              this.$message({
                message: this.$t("message.camera.Editor_failure"),
                type: "success",
              });
            }
          })
        }
      }
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    async handleSizeChange2(val) {
      await this.$nextTick();
      console.log(`每页 ${val} 条`);
      this.currentPage2 = 1;
      this.pageSize2 = val;
    },
    async handleCurrentChange2(val) {
      await this.$nextTick();
      console.log(`当前页: ${val}`);
      this.currentPage2 = val;
    },
  },
};
</script>
<style lang="scss">
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.vqd {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .delete-icon{
    font-size: 20px;
    padding: 0;
  }
  .vqd_left {
    width: 17%;
    min-width: 290px;
  }
  .vqd_right {
    width: 83%;
    .liveview_right_but {
      height: 50px;
      display: flex;
      padding-left: 10px;
      justify-content: space-between;
      .form_butt {
        font-size: 12px;
        // color: #fff;
        background: none;
        border: 1px solid #fff !important;
        border-radius: 5px;
        opacity: 0.9;
        &:hover {
          border: 1px solid #3dabff !important;
          color: #3dabff !important;
        }
      }
      .liveview_right_but2 {
        padding-right: 10px;
        .elselect{
          width: 100px;
        }
      }
      .addChannelSloganBtn {
        //   order:5;
        //   align-content:flex-end;
        //     //  margin-left: 775px;
        //      align-self:flex-end;
        margin-left: auto;
        background: #3abbfe;
        border-radius: 2px;
        padding: 2px 16px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        margin-right: 20px;
        border-color: none;
      }
    }
  }
}
</style>